<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 1.new 关键字创建了纯净的空对象
    // 2.将this指向这个对象
    // 3.返回这个对象
    // 构造函数中的this, 指向函数执行中创建的实列化对象
    function fn() {
        // console.log(this,this instanceof fn);
    }
    // var result = new fn();
    // 调用fn, 执行函数上下文，返回实列化对象
    // console.log(new fn());


    // 构造函数创建对象
    // function Star(uname, age, sex) {
    //     this.name = uname;
    //     this.age = age;
    //     this.sex = sex;
    //     this.sing = function (sing) {
    //         console.log(sing);
    //     }
    // }
    // var ldh = new Star('刘德华', 55, '男');
    // console.log(ldh.name);
    // console.log(ldh["sex"]);
    // ldh.sing('忘情水');


    // 面向对象封装
    // 1. 改写构造函数   =>解决了血缘关系  Tom instanceof Cat => true
    function Cat(name, color) {
        this.name = name;
        this.color = color;
        this.species = "cat";
        // this.say = function () {
        //     console.log("喵喵喵");
        // }
        // this.skill = function () {
        //     console.log("抓老鼠");
        // }
    }

    // 2. 对象中共有的属性和方法重复声明   => 占内存

    // 原型对象 prototype   => {constructor:f}
    // 把共有的属性和方法提取出来 放到构造函数的prototype(Cat.prototype) => 允许所有的实例化对象访问

    // console.dir(Array);  //打印 对象或函数的详细属性和方法
    // 可以理解为函数也是一个特殊的对象  Array.from
    // 自己有访问自己的  
     // 自己没有 则访问构造函数的原型对象(Cat.prototype)
    // console.dir(Cat);

    Cat.prototype.species = "cat";
    Cat.prototype.say = function () {
        console.log("喵喵喵");
    }
    Cat.prototype.skill = function () {
        console.log("抓老鼠");
    }
    // console.dir(Cat.prototype);

    var Tom = new Cat("Tom", "black");
    console.log(Tom.name, Tom.color);
    console.log(Tom);
    Tom.say();

</script>

</html>